//自定义主题
$themes: (
        default: (
                color: #86f7b9,
                bg_color: #7efad3,
                border_color: #000000
        ),
        colorful: (
                color: #EE6666,
                bg_color: #9DD3E8,
                border_color: #879BD7
        )
);

//生成对应元素的主题样式代码
//#{}为插值语句
@mixin theme {
  @each $themes-key, $themes-map in $themes {
    $themes-map: $themes-map !global;
   [data-theme=#{$themes-key}] & {
      @content;
    }
  }
}

//获取对应的主题数据
@function t($key){
  @return map-get($themes-map, $key);
};
